<template>
  <div id="home-page" class="home-box"  @tap.stop>
    <div class="home-title">{{$t('message.mobile.news')}}</div>
    <mobileSearch></mobileSearch>
    <div class="home-content-box">
      <div class="home-content-sort">
        <div class="name">{{$t('message.mobile.recentBrowsHistory')}}</div>
        <div class="sort" @tap.stop @click="openSearch">
          <svg class="action-svg-icon" aria-hidden="true">
            <use xlink:href="#keowledge-mobile-shaixuan"></use>
          </svg>
          <span>{{$t('message.mobile.filter')}}</span>
        </div>
      </div>
      <div class="lately-list">
        <mobileScroll :openPullDown="true" :openUpload="false" :option="scrollOps" @refreshStart="handleRS"  v-if="fileList.length!=0">
          <div v-for="(item,index) in fileList" :key="index" class="lately-item" @click="openFile(item)">
            <div class="lately-item-icon">
              <svg class="icon" aria-hidden="true">
                <use v-bind:xlink:href="getIcon(item.type,item.nameSuffix)"></use>
              </svg>
            </div>
            <div class="lately-item-content">
              <div class="content">
                <div class="name">{{item.dcName}}</div>
                <div class="time">{{item.createTime}}</div>
              </div>
              <div class="lately-actions">
                <svg class="action-svg-icon" aria-hidden="true" v-if="item.share">
                  <use xlink:href="#keowledge-mobile-fenxiang-xianshi"></use>
                </svg>
                <svg class="action-svg-icon" aria-hidden="true" v-if="item.collectIs">
                  <use v-bind:xlink:href="`#keowledge-mobile-shoucang-xuanzhong-2`"></use>
                </svg>
              </div>
            </div>
          </div>
        </mobileScroll>
        <jvs-empty imgSrc="@/assets/images/common/empty.png" v-if="fileList.length==0"></jvs-empty>
      </div>
    </div>
    <sortAction ref="sortActionRef" position='fixed' :showSort="false"  @cancal="handleCancal" @submit="handleSubmit"></sortAction>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import mobileSearch from './mobileSearch.vue'
import sortAction from './sortAction.vue'
import { knowledgeFrequently } from '@/api/knowledge'
import mobileScroll from './mobileScroll.vue'
import { getSessionStore,setSessionStore  } from '@/utils/store'
import { useRoute, useRouter } from "vue-router"
const router = useRouter();
const route = useRoute()
const emit = defineEmits([""])
const props = defineProps({

})

const fileList = ref([])
const sortActionRef= ref()
const scrollOps = ref({
  click:true,
  observeDOM: true,
  probeType: 3,
  pullDownRefresh: {
    threshold: parseFloat(document.documentElement.style.fontSize) * 6.25,
    stop:  parseFloat(document.documentElement.style.fontSize) * 6.25
  },
  pullUpLoad: true,
  bounce:{
    top:false,
    bottom:false
  }
})
const sortObj = ref({
  type:'',
  sort:''
})
const currentOpenItem = ref({})
const dropload = ref(null)

onMounted(()=>{
  init()
})
function handleScroll(){
}
function handleRS(done){
  init(done)
}
function init(done){
  knowledgeFrequently({
    operationType:'查看',
    type:sortObj.value.type
  }).then(res=>{
    if(res.data.code==0){
      fileList.value = res.data.data
      if(done) {
        done()
        proxy.$mobileToast({
          text:$t('message.message.refreshSuccess'),
          top:'7rem'
        })
      }
    }
  }).catch(err=>{
    if(done) done()
  })
}
function openSearch(){
  sortActionRef.value.openSort()
}
function openFile(item){
  let routerList = getSessionStore({name:'mobileRouterList'}) || []
  let currentPath = route.fullPath
  if(routerList.indexOf(currentPath)!=-1){
    routerList.splice(routerList.indexOf(currentPath),1)
  }
  routerList.push(currentPath)
  setSessionStore({name:'mobileRouterList',content:routerList})
  router.push({
    path:'/mobile/viewfile',
    query:{
      knId:item.knowledgeId,
      type:item.type,
      docId:item.dcLibraryId || item.id,
      nameSuffix:item.nameSuffix||'',
      fileName:item.name||item.dcName
    }
  })
}
function handleSubmit(obj){
  sortObj.value = obj
  init()
}
function handleCancal(){

}
</script>
<style lang="scss" scoped>
.home-box{
  padding: 1rem 0rem 0rem;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  .home-title{
    font-size: 1.125rem;
    font-weight: 400;
    color: #363B4C;
    margin-bottom: 1rem;
    padding: 0px .9375rem;
    @include SourceHanSansCN-Bold;
  }
  .home-content-box{
    height: calc(100% - 6rem);
    .home-content-sort{
      display: flex;
      justify-content: space-between;
      color: #6F7588;
      font-weight: 400;
      align-items: center;
      margin-bottom: .75rem;
      padding: 0px .9375rem;
      @include SourceHanSansCN-Regular;
      .name{
        font-size: .75rem;
        font-weight: 400;
      }
      .sort{
        display: flex;
        align-items: center;
        .action-svg-icon{
          height: 1rem;
          width: 1rem;
          margin-right: .25rem;
        }
        font-size: .75rem;
        font-weight: 400;
      }
    }
    .lately-list{
      height: calc(100% - 1.75rem);
      // overflow-y: auto;
      .lately-item{
        display: flex;
        align-items: center;
        padding: 0px 0px 0px .9375rem;
        .lately-item-icon{
          height: 4.25rem;
          display: flex;
          align-items: center;
          .icon{
            height: 1.375rem;
            width: 1.375rem;
          }
        }
        .lately-item-content{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: .75rem;
          width: calc(100% - 2.125rem);
          padding-right: .9375rem;
          height: 4.25rem;
          border-bottom: .0625rem solid #eeeff0;
          .content{
            font-size: .9375rem;
            font-weight: 400;
            color: #363B4C;
            .name{
              @include SourceHanSansCN-Medium;
              margin-bottom: .25rem;
              max-width: 16rem;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .time{
              font-size: .875rem;
              font-weight: 400;
              color: #6f7588;
              @include SourceHanSansCN-Regular;
            }
          }
          .lately-actions{
            .action-svg-icon{
              height: 1.375rem;
              width: 1.375rem;
            }
            .action-svg-icon+.action-svg-icon{
              margin-left: .75rem;
            }
          }
        }
      }
    }
  }
}
</style>